<template>
	<view class="proxy-goods-list-page">
		<!-- Header -->
		<view class="header">
			<!-- 吸顶栏 -->
			<u-sticky offset-top="0" h5-nav-height="0">
				<!-- 搜索 -->
				<view class="search row">
					<u-search class="flex1" v-model="keyword" :focus="showHistory" @focus="showHistory = true"
						@search="onSearch" bg-color="#F4F4F4" />
					<view class="search--cancel" v-show="showHistory" @tap="onCancelSearch">取消</view>
				</view>
			</u-sticky>
		</view>

		<!-- 搜索历史 -->
		<view v-show="showHistory" class="bg-white search-container">
			<view v-if="hotList.length" class="search-content">
				<view class="search-title">热门搜索</view>
				<view class="search-item row wrap">
					<block v-for="(item, index) in hotList" :key="index">
						<view class="search-words br60 mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">
							{{ item }}
						</view>
					</block>
				</view>
			</view>
			<view v-if="historyList.length" class="search-content">
				<view class="search-title row-between">
					<view>历史搜索</view>
					<view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchHistory">清空</view>
				</view>
				<view class="search-item row wrap">
					<block v-for="(item, index) in historyList" :key="index">
						<view class="search-words br60 mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">
							{{ item }}
						</view>
					</block>
				</view>
			</view>
			<view class="search-mask" @tap="onCancelSearch"></view>
		</view>

		<!-- Main -->
		<view class="main" v-show="!showHistory">
			<view class="main-top-bar">
				<picker class="condition-btn" mode="selector" :range="options" @change="onSelectChange">
					<text>我的商品(默认)</text>
					<u-icon name="arrow-down" size="26" color="#fff"></u-icon>
				</picker>
				
				
				<tabs sticky-bg-color="transparent" :show-bar="true" :current="activeTab" bg-color="transparent"
					@change="changeActive" :config="{activeColor: '#24A3FF', underLineColor: '#24A3FF'}">
					<tab title="全部"></tab>
					<tab title="待租商品"></tab>
					<tab title="已租商品"></tab>
					<tab title="商品选购"></tab>
				</tabs>
				
				
			</view>
			<!-- 商品列表 -->
			<view class="goods-list-wrap">
				<!-- 商品样式1 -->
				<view >
					<view class="goods-container-one">
						<block v-for="(item, index) in goodsList" :key="item.id">
							<view class="goods-item-one" @tap="goGoodsDetail(item.id)">
								<!-- Image -->
								<u-image width="180" height="180" border-radius="4px" :src="item.image" />

								<view class="goods-info">
									<!-- Name -->
									<view class="name-bar">
										<view class="goods-name line1">{{item.name}}</view>
										<view class="status style1">待租</view>
<!-- 										<view class="status style2">已租</view> -->
									</view>
						
									<view class="row mt30">
										<view class="tag">我的</view>
									</view>
									<!-- Price -->
									<view class="ornament goods-price">
										<view v-if="false">
											<text class="xs">¥</text>
											<!-- 整数 -->
											<text class="xxl">{{
                                                formatPrice(item.price, 'integer')
                                            }}</text>
											<!-- 小数 -->
											<text class="xs">{{
                                                formatPrice(item.price, 'decimals')
                                            }}</text>
											<!-- 单位 -->
											<text class="xs">{{
                                                item.is_unit == 1 ? '/天' : '/月'
                                            }}</text>
										</view>

										<view class="price">
											<view class="muted md">
												<price-format color="#FF2C3C" :first-size="28" :second-size="28"
													:subscript-size="28" :price="2648.48" :weight="500"></price-format>
											</view>
											<view class="right">
												<text class="label">库存：</text>
												<text class="val">9</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>

				
			</view>

			<!-- 加载状态 -->
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无商品</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		getLeaseClassify,
		getLeaseGoodsList
	} from '@/api/lease.js'

	import {
		getSearchpage,
		clearSearch
	} from '@/api/store'

	import {
		loadingFun,
		formatPrice
	} from '@/utils/tools'
	import {
		loadingType
	} from '@/utils/type'
	const app = getApp();
	export default {
		data() {
			return {
				pageType: "1", // 1:零售商城 2:公司直营 3:租赁共享
				keyword: '', // 搜索内容
				status: loadingType.LOADING, // 加载状态
				page: 1, // 当前数据页面
				goodsType: 'one', // 商品列表样式展示方式
				goodsList: [], // 商品列表数据
				priceSort: '', // 价格排序
				saleSort: '', // 销量排序
				classify_id: '', // 分类ID
				showHistory: false, // 显示搜索历史
				historyList: [], // 搜索历史数据列表
				hotList: [], // 热门搜素数据列表
				leaseClassifyList: [], // 租赁分类列表

				options: ['选项1', '选项2'],
				activeTab: 1
			};
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
			// 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun()
			}
		},
		computed: {
			comprehensive() {
				const priceSort = this.priceSort
				const saleSort = this.saleSort

				return !priceSort && !saleSort ? true : false
			}
		},

		onLoad(options) {
			// 获取分类列表数据
			getLeaseClassify().then((res) => {
				if (res.code != 1) return
				this.leaseClassifyList = res.data
				// this.classify_id = res.data[0].id || '';
				// 商品列表数据请求
				this.getGoodsList()
			})
			switch (options.type) {
				case "1":
					uni.setNavigationBarTitle({
						title: "零售商城"
					})
					break
				case "2":
					uni.setNavigationBarTitle({
						title: "公司直营"
					})
					break
				case "3":
					uni.setNavigationBarTitle({
						title: "租赁共享"
					})
					break
			}
		},
		onShow(options) {

		},

		// 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList()
		},

		methods: {
			// 格式化价格输出
			formatPrice,

			onSelectChange(e) {
				console.log(e)
			},
			changeActive(index) {
				if(index === 3){
					this.activeTab = 0
					uni.navigateTo({
						url:"/package_goods/pages/proxy_goods_select_list/index"
					})
				}
			},

			// 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

			// 清空搜索记录
			clearSearchHistory() {
				clearSearch().then((res) => {
					if (res.code != 1) return
					this.getSearchpageFun()
				})
			},

			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false
				// this.onRefresh();
			},

			// 点击分类
			onClassify(goods_id) {
				this.classify_id = goods_id
				this.onRefresh()
			},

			// 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh()
			},

			// 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh()
			},

			// 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh()
			},

			// 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then((res) => {
					if (res.code != 1) return
					const data = res.data
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				})
			},

			// 搜索
			onSearch() {
				this.onRefresh()
			},

			// 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList())
			},

			// 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh()
			},

			// 获取商品列表数据
			getGoodsList() {
				if (this.status == loadingType.FINISHED) return
				// 参数
				const field = {
					category_id: this.classify_id,
					keyword: this.keyword,
					price: this.priceSort,
					sales_sum: this.saleSort
				}
				// 请求
				loadingFun(getLeaseGoodsList, this.page, this.goodsList, this.status, field).then(
					(res) => {
						console.log(res)
						if (!res) return
						this.page = res.page
						this.goodsList = res.dataList
						this.status = res.status
					}
				)
			},

			// 查看商品详情
			goGoodsDetail(goods_id) {
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + goods_id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>